<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" >
<head><title>website-keyboard-control</title>
<META http-equiv="Content-Type"	content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-TW" />
<META http-equiv="Pragma"		content="no-cache"/>
<META http-equiv="Cache-control"	content="no-cache, must-revalidate, private"/>
<META http-equiv="imagetoolbar" 	content="no" />

<META name="author"				content="Canis"/>
<META name="copyright"			content="www.clonefactor.com/"/>
<META name="keywords"			content="clonefactor.com, clone factor, web design"/>
<META name="Description"		content="web"/>
<META name="date"				content="2012/02/29"/>

<!-- Javascript //-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/keyboard-lastest.js"></script>
<script type="text/javascript">
function output(_str){
	var _htm = $("#output").val();
	_htm=_str+"\n"+_htm;
	if(typeof _str=='undefined') _htm="";
	$("#output").val(_htm);
}//fn
function keystats(_str){
	var _htm = $("#keystats").val();
	_htm=_str+"\n"+_htm;
	if(typeof _str=='undefined') _htm="";
	$("#keystats").val(_htm);
}//fn
function html2Tag(_tagName, _src, _completefn){
	$("#"+_tagName).load(_src, function(response, status, xhr){
		if (status == "error") {
			$("#"+_tagName).html("Error : " + xhr.status + " " + xhr.statusText);
		}else if(status== "success"){
			if(_completefn!=undefined && _completefn!=null) _completefn();
		}//if
	});
}//fn
$(document).ready(function(){
	html2Tag("menu", "menu.html");
	$.keyboard.debug(keystats);			// linkup debug message to keystats;
	eval( $("#draftscript").val() );	// run demo script.
	$(".runscript").click(function(){ eval( $("#draftscript").val() ); });
	$(".clearscript").click(function(){	$("#draftscript").val(""); });
	$("#showpanel").click(function(){ $(this).hide(); $("#testpanel").show(); });
});

</script>

<LINK href='./css/style.css' rel='stylesheet' type='text/css'/>
<style type="text/css"></style>
</head>
<body>
	<div style="color:#ccc;text-shadow:-1px -1px 0px #999;font-size:60px; " >website-keyboard-control</div>
	
	<fieldset>
		<legend>Example</legend>
		<div id="menu"></div>
	</fieldset>
	
	<fieldset>
		<legend>test textfield typing</legend>
		<p>text field <input id="txt01" type="text" value="some text" cols="100" /></p>
		<p>password field <input id="txt02" type="password" value="you can see me" cols="100" /></p>
	</fieldset>
	
	<input id="showpanel" type="button" value="Show keyBind Example" />
	
	<div id="testpanel">
	<input class="runscript" type="button" value="Apply Code" />
	<input class="clearscript" type="button" value="Clear Code" />
	<textarea id="draftscript" rows=25>
$.keyBind({
	key : "space bar",			// 按鍵 Space Bar, 按下執行
	fn : function(){ output("space bar, with no repeat.") }
},{
	key : "a",					// 按鍵 A
	alone : true,				// 只能獨自執行,
	fps : 50,
	fn : function(){			// 多項功能執行.
		output('Only A');
	}
},{
	key : "Ctrl|a",					// 按鍵 Ctrl + A
	fn : function(){				// 多項功能執行.
		output("Ctrl + A - multi action 1");
	}
},{
	key : "Ctrl|a",					// 按鍵 Ctrl + A
	fn : function(){				// 多項功能執行.
		output("Ctrl + A - multi action 2");
	}
},{
	key : "home|end",			// 按鍵 Home + End 同時按下,
	fn : function(){ output("Home+end Clicked"); }
},{
	key : "home|end",			// 按鍵 Home + End
	repeat : true,				// 重覆執行
	fps : 50,					// 重覆間隔 0.05
	fn : function(){ output("holding HOME+End key - repeat in 0.05") }
},{
	key : "home|end",			// 按鍵 Home + End
	repeat : true,				// 重覆執行
	fps : 100,					// 重覆間隔 0.05
	fn : function(){ output("---------------------- repeat in 0.1") }
},{
	key : "h|e|l|l|o",			// 按鍵 H,e,l,l,o
	order : true,				// 順序
	fn : function(){ output("Oh hello there.") }
});

$.keyBind({
	key : "esc",				// 按鍵 Esc
	fn : function(){			// 清除, 測試用.
		output();
		$("#txt01").val("");
		$("#txt02").val("");
		keystats();
	}
});

$.keyBind({
	key : "F5",					// 按鍵 F5, reload.
	fn : function(){window.location.reload(true);}
});
	</textarea>
	</div>
	
	<div id="footer">
		<textarea id="output" cols="40" rows="15">output area</textarea>
		<textarea id="keystats" cols="80" rows="15" disabled>Debug of keyboard api</textarea>
	</div>
</body>
</html>